<!--查看成绩单-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div style="display: flex;">
        <div class="search-container-item right87">
          <div class="item-name">专业班次：</div>
          <el-select v-model="dataForm.classId" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in zybc" :key="item.id" :label="item.className" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right87">
            <div class="item-name">姓名：</div>
            <el-input v-model="dataForm.studentName" class="width110" size="mini"></el-input>
        </div>
        <div class="search-container-item right87">
            <div class="item-name">学号：</div>
            <el-input v-model="dataForm.studentCode" class="width110" size="mini"></el-input>
        </div>
        <div class="search-container-item right87">
          <div class="item-name">分数段：</div>
          <el-select v-model="dataForm.scoreLevel" placeholder="请选择" class="width110" size="mini">
            <el-option v-for="item in gradeList" :key="item.label" :label="item.gradename" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70 right87" @click="getList">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
      <div style="display:flex">
        <div class="search-button edit-yellow right87" style="width:116px" @click="editInfo(false)">
            <img src="../../../assets/assessment/icon-dr.png" alt="" />
            <span>手动录入</span>
        </div>
        <div class="search-button color-warning right87" style="width:116px" @click="importFile">
            <img src="../../../assets/assessment/icon-import.png" alt="" />
            <span>成绩导入</span>
        </div>
        <div class="search-button delete-red" style="width:116px" @click="deleteInfo()">
            <img src="../../../assets/assessment/icon-delete.png" alt="" />
            <span>批量删除</span>
        </div>
    </div>
    </div>
    <div class="table-container table-css">
      <div style="margin-bottom: 33px;">
        <span class="item-name">全国成绩情况:平均分100&nbsp;&nbsp;合格率:100% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            校区成绩情况:优秀人数:20 优秀率:30%&nbsp;&nbsp;&nbsp;良好人数:10 良好率:10%&nbsp;&nbsp;&nbsp;合格人数:10 合格率:10%&nbsp;&nbsp;&nbsp; 不合格人数:1 不及格率:1%
            &nbsp;&nbsp;&nbsp;最高分:500 &nbsp;&nbsp;&nbsp;平均分:400
        </span>
      </div>
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"  >
        <el-table-column  type="selection" align="center" width="80"></el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="150">
          <div slot-scope="scope">
            <span class="small-btn edit-green" @click="editInfo(true)">
                <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
            </span>
            <span class="small-btn delete-red" @click="deleteInfo(scope.row.scoreId)">
                <img src="../../../assets/assessment/icon-delete.png"> 删除
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center" width="130"> 
          <template slot-scope="scope">{{scope.row.examScore.studentName}}</template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" align="center" width="100">
          <template slot-scope="scope">{{scope.row.examScore.gender}}</template>
        </el-table-column>
        <el-table-column prop="dept" label="院系" align="center">
          <template slot-scope="scope">{{scope.row.examScore.dept}}</template>
        </el-table-column>
        <el-table-column prop="className" label="专业班次" align="center" >
          <template slot-scope="scope">{{scope.row.examScore.className}}</template>
        </el-table-column>
        <el-table-column prop="studentCode" label="学号" align="center">
          <template slot-scope="scope">{{scope.row.examScore.studentCode}}</template>
        </el-table-column>
        <el-table-column v-if="!dataForm.isFixed" prop="idCard" label="身份证号" align="center">
          <template slot-scope="scope">{{scope.row.examScore.idCard}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="examNumber" label="准考证号" align="center">
          <template slot-scope="scope">{{scope.row.examScore.examNumber}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="reportNumber" label="成绩单号" align="center">
          <template slot-scope="scope">{{scope.row.examScore.reportNumber}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="totalPoints" label="总分" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.totalPoints}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="hearing" label="听力" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.hearing}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="reading" label="阅读" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.reading}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="synthesis" label="综合" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.synthesis}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="writing" label="作文" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.writing}}</template>
        </el-table-column>
        <el-table-column v-if="dataForm.isFixed" prop="speaking" label="口语" align="center" width="80">
          <template slot-scope="scope">{{scope.row.examScore.speaking}}</template>
        </el-table-column>
        <el-table-column v-if="!dataForm.isFixed" prop="totalPoints" label="考试成绩" align="center"  width="100">
          <template slot-scope="scope">{{scope.row.examScore.totalPoints}}</template>
        </el-table-column>
        <el-table-column v-if="!dataForm.isFixed" prop="standard" label="标准" align="center"  width="100">
          <template slot-scope="scope">{{scope.row.examScore.speaking}}</template>
        </el-table-column>
        <el-table-column v-if="!dataForm.isFixed" prop="certificate" label="证书编号" align="center">
          <template slot-scope="scope">{{scope.row.examScore.certificate}}</template>
        </el-table-column>
        <el-table-column prop="scoreRemark" label="备注" align="center">
          <template slot-scope="scope">{{scope.row.examScore.scoreRemark}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <div class="export-button" @click="importExcel">
      <img src="../../../assets/assessment/icon-export.png" alt="" />
      <span>导出Excel</span>
    </div>
    <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    <!-- 修改 -->
    <reportEdit ref="edit" :params="editCode" @saveEdit="getList"></reportEdit>
    <reportEditSL ref="editSL" :params="editCode"  @saveEdit="getList"></reportEditSL>
    <!-- 删除 -->
    <del-notice ref="del" @delbtn="saveDel"></del-notice>
    <!-- 导入 -->
    <recordImport ref="recordImport" :defaultValue="defaultValue"></recordImport>
  </div>
</template>

<script>
import {CETList,cusList,reportList,delExamScoreById} from "@/api/exam";
import reportEdit from './reportEdit.vue'
import reportEditSL from './reportEditSL.vue'
import delNotice from './delNotice.vue'
import recordImport from "./recordImport.vue";

import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      duiList:[],//学员队列表
      dataForm:{
        studentName:'',//学员姓名
        studentCode:'',//学号
        pageNo:1,
        pageSize:50,
        batchId:'',
        isFixed:false,
        classId:'',//专业班次编号
        scoreLevel:'',//分数段
      },
      defaultValue:{
        isFixed:false,
        batchId:'',
      },
      ID:'',
      total:1,
      tableData: [
        {rddate:1}
      ],
      editCode:{
        isEdit:true,
        id:''
      },
      gradeList:[
        {
            label:'优秀',
            value:'优秀'
        },
        {
            label:'良好',
            value:'良好'
        },
        {
            label:'及格',
            value:'及格'
        }
      ],
      zybc:[]
    };
  },
  components:{reportEdit,reportEditSL,delNotice,recordImport},
  mounted(){
    this.commonApi.getZybc().then(res=>{
        this.zybc = res.data
    })
    // this.dataForm.isFixed = this.$route.query.row.isFixed;
    let row = this.$route.query
    this.dataForm.batchId = row.id;
    this.dataForm.isFixed = row.isFixed
    this.getList()
  },
  methods: {
    async getList(){
      console.log(1)
      let res = await reportList(this.dataForm)
      this.tableData = res.data.records
      this.total =  res.total
    },
    deleteInfo(ID){
      if(ID){
        this.ID = ID;
        this.$refs.del.showMessageDialog = true;
      }
      if(!ID && this.ID){
        this.$refs.del.showMessageDialog = true;

      }else{
        this.$message.error('请选择要删除的数据！')
      }
    },
    async saveDel(){
      let res = await delExamScoreById({scoreIds:this.ID})
      if(res.code == 200){
        this.$message.success('删除成功！');
        this.$refs.del.showMessageDialog = false;
        this.search()
      }
    },
    handleSelectionChange(e){
      let ID = [];
      ID = e.filter(item=>item.scoreId)
      this.ID = ID.join(',')
    },
      //编辑
    editInfo(isEdit,id){
      if(this.dataForm.isFixed == 'true'){
        this.$refs.editSL.windowVisible = true;
      }else{
        this.$refs.edit.windowVisible = true;
      }
      this.editCode.isEdit = isEdit;
      this.editCode.id = id
    },
    importFile(){
      this.defaultValue.isFixed = this.dataForm.isFixed;
      this.defaultValue.batchId = this.dataForm.batchId;
      this.$refs.recordImport.windowVisible = true
    },
    //导出
    importExcel(){
      let url = this.dataForm.isFixed == true?'/examScore/exportCETExamScoreByBatchId':'/examScore/exportCusExamScoreByBatchId'
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+url,
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '公共考试成绩.xlsx');
      }); 
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
  align-items: center;
}
.width70{width: 70px;}
.width110{width: 110px;}
.right22{margin-right: 22px;}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color:#F86900;
    >img{width: 17px!important;height:17px!important}
}
.small-btn{margin-bottom: 14px;}
.color-green{
    background:#F9F9F9;
    border: 1px solid #02C86C;
    >span{color: #02C86C;}
    >img{width: 17px!important;height:17px!important}
}
.right87{margin-right: 30px;}
.item-name {
  color: #004ca7;
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
.edit-green{
    margin-top: 10px;
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
}
</style>
